<template>
	<view class="pL15 pR15 pB20">
		<view class="font18 bold mB15 mT15">工作流程</view>
		<view class="pT15 pB15 pL15 pR15 radius20 bgf" v-if="flow.length>0">
			
				<view v-for="(item,i) in flow" :key="i" class="relative pL25 flowItem">
					<image class="imgW32 flowImg" :src="resources.circleFlow" mode=""></image>
					<view class="flex jst-between font12">
						<text>上传凭证</text>
						<text class="u-8bd">{{item.uploadDate}}</text>
					</view>
					<view class="font15 line24">{{item.processNotes}}</view>
					<view class="flex flex-wrap mT10">
						<image @click="xf.previewImg([xf.getImgUrl(v)])" class="pjImg"
							v-for="(v,j) in getImgLis(item?.processPicture)" :key="j" :src="xf.getImgUrl(v)" mode="">
						</image>
				
					</view>
					<view class="flex alg-center">
						<image class="imgW32" :src="resources.posIcon" mode=""></image>
						<text class="font14">{{item.processAddress}}</text>
					</view>
				</view>
		
		</view>
		<block v-else>
			<xfNoData :background-color="'transparent'" :text="'暂无工作记录'"></xfNoData>
		</block>

	</view>
</template>

<script>
	import {
		workFlowDetail
	} from "@/api/userInterface/user.js"
	import {
		workRecord
	} from "@/api/companyInterface/user.js"
	export default {
		data() {
			return {
				flow: []
			}
		},
		onLoad(e) {
			if(e.jobType=="company"){
				this.getCompanyWorkDetail(e.id,e.userId)
			}else{
				this.getFlowDetail(e.id)
			}
			
		},
		methods: {
			getImgLis(v) {

				if (v && v.length > 0) {
					console.log(v.split(','))
					return v.split(',')
				} else {
					return []
				}
			},
			getCompanyWorkDetail(id,userId) {
				workRecord({
					xfOddjobInfoId: id,
					xfOddGeneralId:userId,
					pageSize:50
				}).then(res => {
					this.flow = res.result.records
				})
			},
			getFlowDetail(id) {
				workFlowDetail({
					oddjobInfoId: id,
					pageNo: 1,
					pageSize: 50
				}).then(res => {
					this.flow = res.result.records

				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style lang="scss" scoped>
	.flowItem {
		margin-bottom: 40rpx;

		&:before {
			position: absolute;
			height: calc(100% - 60rpx);
			content: "";
			width: 3rpx;
			background: #3291F8;
			left: 8rpx;
			top: 60rpx;
		}

		.flowImg {
			position: absolute;
			left: -10rpx;
			top: -3rpx;
		}

		.pjImg {
			width: 174rpx;
			height: 174rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>